<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="200px">
        <div class="menu">
          <div class="menu-head">
            <img class="sidebar-logo" src="@/assets/log.svg" alt="logo">
            <h1>后台管理</h1>
          </div>
          <el-menu
            active-text-color="#8DBBD8"
            background-color="#001529"
            class="el-menu-vertical-demo"
            default-active="2"
            text-color="#fff"
            @open="handleOpen"
            @close="handleClose"
            style="height: 100vh"
          >
            <RouterLink to="/home"><el-menu-item index="1">
              <el-icon><VideoCamera /></el-icon>
              <span>视频管理</span>
            </el-menu-item></RouterLink>
            <RouterLink to="/banner"><el-menu-item index="2">
              <el-icon><Picture /></el-icon>
              <span>横幅管理</span>
            </el-menu-item></RouterLink>
            <RouterLink to="/addVideo"><el-menu-item index="3">
              <el-icon><UploadFilled /></el-icon>
              <span>视频上传</span>
            </el-menu-item></RouterLink>
            <RouterLink to="/file"><el-menu-item index="4">
                <el-icon><VideoCamera /></el-icon>
                <span>文件管理</span>
              </el-menu-item></RouterLink>
              <el-menu-item index="5" @click="logout">
                <el-icon><SwitchButton /></el-icon>
                <span>退出登录</span>
              </el-menu-item>
          </el-menu>
        </div>
      </el-aside>
      <el-container>
        <el-main style="--el-main-padding: 20px;"><RouterView></RouterView></el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script setup>
import {
 VideoCamera,
 Picture,
 UploadFilled
} from '@element-plus/icons-vue'
import { useStore } from 'vuex';
import { useRouter } from "vue-router"

const router = useRouter();

const store = useStore();
function logout() {
  store.dispatch('logout');
  router.push('/login')
}
</script>
